<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item>
        <template #title>
          <span class="custom-title">挂号费</span>
        </template>
        <el-table
          :data="appointmentDatas"
          height="300"
          style="width: 100%"
          stripe
        >
          <el-table-column prop="time" label="时间" width="300" />
          <el-table-column prop="apartment" label="科室" width="300" />
          <el-table-column prop="doctorName" label="医生姓名" width="300" />
          <el-table-column prop="status" label="状态" width="300">
            <template v-slot="scope">
              <el-button
                v-if="scope.row.status === '0'"
                type="primary"
                size="mini"
                @click="appointmentPay(scope.row)"
              >
                去缴费
              </el-button>
              <span v-else style="color: green">已缴费</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item>
        <template #title>
          <span class="custom-title">检查/药费</span>
        </template>
        <el-table
          :data="drugCheckDatas"
          height="300"
          style="width: 100%"
          stripe
        >
          <el-table-column prop="mid" label="药品编号" width="100vw" />
          <el-table-column prop="time" label="时间" width="300" />
          <el-table-column prop="drug_check" label="检查,药" width="300">
            <template v-slot="scope">
              <div v-html="scope.row.drug_check"></div>
            </template>
          </el-table-column>
          <el-table-column prop="total_price" label="总价" width="300" />
          <el-table-column prop="status" label="状态" width="300">
            <template v-slot="scope">
              <el-button
                v-if="scope.row.status === '0'"
                type="primary"
                size="mini"
                @click="drugcheckPay(scope.row)"
              >
                去缴费
              </el-button>
              <span v-else style="color: green">已缴费</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item>
        <template #title>
          <span class="custom-title">退费单</span>
        </template>
        <el-table :data="refundDatas" height="300" style="width: 100%" stripe>
          <el-table-column prop="time" label="时间" width="300" />
          <el-table-column prop="type" label="类型" width="300" />
          <el-table-column prop="describe" label="描述" width="300">
            <template v-slot="scope">
              <div v-html="scope.row.describe"></div>
            </template>
          </el-table-column>
          <el-table-column prop="total_price" label="总价" width="300" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      v-model="appointment_dialogVisible"
      class="custom-dialog appointment-dialog"
      width="60vw"
      style="margin-left: 20vw"
      :before-close="handleClose"
    >
      <template #title>
        <span style="margin-left: 2vw">请支付</span>
      </template>
      <div class="user-appointment-payment-detail">
        <div class="user-appointment-payment-items recure-time">
          就诊时间:
          <span>{{ appointment.time }}</span>
        </div>
        <div class="user-appointment-payment-items">
          医院名称:
          <span>重庆大学附属医院</span>
        </div>
        <div class="user-appointment-payment-items">
          就诊科室:
          <span> {{ appointment.department }}</span>
        </div>
        <div class="user-appointment-payment-items">
          医生姓名:
          <span> {{ appointment.doctorName }}</span>
        </div>
        <div class="user-appointment-payment-items">
          支付金额:
          <span> 50</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="appointmentSurePay()"
            >确认支付</el-button
          >
          <el-button @click="appointmentNoPay()"> 取消支付 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="drugcheck_dialogVisible"
      class="custom-dialog drugcheck-dialog"
      width="60vw"
      style="margin-left: 20vw"
      :before-close="handleClose"
    >
      <template #title>
        <span style="margin-left: 2vw">请支付</span>
      </template>
      <div class="user-appointment-payment-detail">
        <div class="user-appointment-payment-items recure-time">
          开药时间:
          <span>{{ record.time }}</span>
        </div>
        <div class="user-appointment-payment-items">
          医院名称:
          <span>重庆大学附属医院</span>
        </div>
        <div class="user-appointment-payment-items large-items">
          药品:
          <span v-html="record.drug_describe"></span>
        </div>
        <div class="user-appointment-payment-items large-items">
          检查:
          <span v-html="record.check_describe"></span>
        </div>
        <div class="user-appointment-payment-items">
          支付金额:
          <span> {{ record.total_price }}</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="drugcheckSurePay()"
            >确认支付</el-button
          >
          <el-button @click="drug_check_no_pay()"> 取消支付 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import { ElMessage } from "element-plus";

dayjs.extend(utc);
dayjs.extend(timezone);
export default {
  name: "UserPayment",

  data() {
    return {
      appointment_dialogVisible: false,
      drugcheck_dialogVisible: false,
      id: "",
      appointment: {
        time: "2021-09-01 09:00",
        department: "内科",
        doctorName: "张三",
      },
      record: {
        time: "2021-09-01 09:00",
        drug_describe: "感冒药",
        check_describe: "血常规",
        total_price: 100,
      },
      appointmentDatas: [
        {
          time: "2021-09-01 09:00",
          apartment: "内科",
          doctorName: "张三",
          status: "0",
        },
        {
          time: "2021-09-01 10:00",
          apartment: "外科",
          doctorName: "李四",
          status: "1",
        },
      ],
      drugCheckDatas: [
        {
          time: "2021-09-01 09:00",
          drug_check: "血常规",
          total_price: 100,
          status: "0",
        },
        {
          time: "2021-09-01 10:00",
          drug_check: "尿常规",
          total_price: 50,
          status: "1",
        },
      ],
      refundDatas: [
        {
          time: "2021-09-01 09:00",
          type: "退药",
          describe: "退了感冒药",
          total_price: 10,
        },
        {
          time: "2021-09-01 10:00",
          type: "退检查",
          describe: "退了血常规",
          total_price: 20,
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$router.push({ name: "UserPayment" });
      done();
    },
    formatDateTime(dateTimeString) {
      return dayjs(dateTimeString)
        .subtract(8, "hour")
        .tz("Asia/Shanghai")
        .format("YYYY-MM-DD HH:mm:ss");
    },
    appointmentPay(row) {
      console.log("row time", row.time);
      this.appointment.time =
        row.time.split(" ")[0] + " " + row.time.split(" ")[1].slice(0, 5);
      this.appointment.department = row.apartment;
      this.appointment.doctorName = row.doctorName;
      console.log(row.index);
      this.appointment.arrangeId = this.appointmentDatas[row.index].arrangeId;
      this.appointment_dialogVisible = true;
    },
    appointmentSurePay() {
      console.log(this.appointment.arrangeId);
      axios.get("http://192.168.228.82:8080/arrange/updateIfPay", {
        params: {
          arrangeId: this.appointment.arrangeId,
        },
      });
      this.appointment_dialogVisible = false;
      window.location.reload();
      ElMessage({
        message: "支付成功！！！",
        type: "success",
        plain: true,
        offset: 250,
        duration: 1000,
      });
    },
    appointmentNoPay() {
      this.appointment_dialogVisible = false;
      ElMessage({
        message: "支付失败",
        type: "warning",
        plain: true,
        offset: 250,
        duration: 1000,
      });
    },
    drugcheckPay(row) {
      console.log(row);
      console.log(row.time);
      this.record.time =
        row.time.split(" ")[0] + " " + row.time.split(" ")[1].slice(0, 5);
      this.record.drug_describe = row.drug_check;
      this.record.total_price = row.total_price;
      this.record.drug_describe = row.drugs
        .map((drug) =>
          Object.entries(drug).map(([key, value]) => `${key}x${value}`)
        )
        .join("<br>");
      this.record.check_describe = row.checks
        .map((check) => Object.keys(check))
        .join("<br>");
      this.record.total_price = row.total_price;
      console.log("row", row.mid);
      this.record.mid = row.mid;
      this.drugcheck_dialogVisible = true;
    },
    drugcheckSurePay() {
      axios
        .get("http://192.168.228.82:8080/doctor/updateIfPay", {
          params: {
            mId: this.record.mid,
          },
        })
        .then(() => {
          this.drugcheck_dialogVisible = false;
          window.location.reload();
          ElMessage({
            message: "支付成功！！！",
            type: "success",
            plain: true,
            offset: 250,
            duration: 1000,
          });
        });
    },
    drug_check_no_pay() {
      this.drugcheck_dialogVisible = false;
      ElMessage({
        message: "支付失败",
        type: "warning",
        plain: true,
        offset: 250,
        duration: 1000,
      });
    },
  },
  mounted() {
    this.id = JSON.parse(localStorage.getItem("user")).pid;
    axios
      .get("http://192.168.228.82:8080/arrange/findArrangeByPId", {
        params: { pId: this.id },
      })
      .then((res) => {
        console.log("arrange", res.data);
        this.appointmentDatas = res.data
          .map((item) => {
            return {
              arrangeId: item.arrangeId,
              time: this.formatDateTime(item.arrangeTime),
              apartment: item.doctor.department,
              doctorName: item.doctor.name,
              status: item.ifPay === "0" ? "0" : "1",
            };
          })
          .sort((a, b) => new Date(a.time) - new Date(b.time))
          .map((item, index) => {
            item.index = index;
            return item;
          });
      });
    axios
      .get(
        "http://192.168.228.82:8080/medicalRecord/getMedicalRecordsOfOnePatient",
        {
          params: {
            pid: this.id,
          },
        }
      )
      .then((res) => {
        console.log("返回的数据", res.data);
        this.drugCheckDatas = res.data
          .map((item) => ({
            time: this.formatDateTime(item.time),
            drug_check:
              item.checks.map((check) => Object.keys(check)).join("<br>") +
              "<br>" +
              item.drugs
                .map((drug) =>
                  Object.entries(drug).map(([key, value]) => `${key}x${value}`)
                )
                .join("<br>"),
            mid: item.mid,
            drugs: item.drugs,
            checks: item.checks,
            total_price: item.sumPrice.toFixed(2),
            status: item.ifPay === "0" ? "0" : "1",
          }))
          .sort((a, b) => new Date(a.time) - new Date(b.time))
          .map((item, index) => {
            item.index = index;
            return item;
          });
      });
    axios
      .get(
        "http://192.168.228.82:8080/refundRecord/getRefundRecordsOfOnePatient",
        { params: { pid: this.id } }
      )
      .then((res) => {
        this.refundDatas = res.data.map(
          (item) => (
            console.log(item),
            {
              time: this.formatDateTime(item.time),
              type: item.type === "0" ? "退药" : "退检查",
              describe:
                item.type === "0"
                  ? item.drugs
                      .map((drug) =>
                        Object.entries(drug).map(
                          ([key, value]) => `${key}x${value}`
                        )
                      )
                      .join("<br>")
                  : item.checks.map((check) => Object.keys(check)).join("<br>"),
              total_price: item.price.toFixed(2),
            }
          )
        );
      });
  },
};
</script>

<style scoped>
.custom-title {
  font-size: 15px; /* 设置字体大小 */
  font-family: "Arial", sans-serif; /* 设置字体 */
}

.dialog-footer {
  text-align: right;
}
.user-appointment-payment-detail {
  padding: 20px;
  font-size: 16px;
}
.user-appointment-payment-items {
  height: 10px;
  margin-top: 10px;
  padding: 15px; /* 内边距 */
}
.large-items {
  overflow: auto;
}
</style>
